{% extends "base.html" %}
{% block subtitle %}用户手册{% endblock %}
{% block content -%}
<div class="row">
  <div class="col-md-9 manual">
    <h1 class="userguide-heading">用户手册</h1>

    <section>
      <h2 id="basic">基本操作</h2>

      <subsection>
        <h3 id="signup">注册</h3>
        <p>
          <img src="{{ url_for('static', filename='img/userguide/signup-zh.jpg') }}"
               alt="注册界面" class="img-thumbnail" />
        </p>
        <p>
          在使用超电磁炮在线评测系统之前，您必须注册一个账号。
        </p>
        <p>
          注册超电磁炮的账号是非常简单的，至少输入一个 3 ~ 32 位的用户名，不超过 80 个字符的电子邮件，以及 7 ~ 32 位的密码就可以完成注册。不过，如果用户名或者邮箱与现有用户重复的话，系统会提醒您重新选择一个合适的用户名或者邮箱。
        </p>
      </subsection>

      <subsection>
        <h3 id="signin">登陆</h3>
        <p>
          <img src="{{ url_for('static', filename='img/userguide/signin-button-zh.jpg') }}"
               alt="登陆按钮" class="img-thumbnail" />
        </p>
        <p>
          当您处于未登录状态时，可以点击右上角的<mark>登陆</mark>按钮打开登陆页面。
        </p>
        <p>
          <img src="{{ url_for('static', filename='img/userguide/signin-zh.jpg') }}"
               alt="登陆界面" class="img-thumbnail" />
        </p>
        <p>
          登陆表单中，您可以在<mark>用户名或邮箱</mark>处输入您注册时使用的用户名或者邮箱。两者都可以登陆您的账号。如果您不愿意每次打开浏览器都重新登陆超电磁炮，那么您可以选中<mark>记住我？</mark>，下一次打开浏览器便可以直接进入系统。
        </p>
        <p>
          <img src="{{ url_for('static', filename='img/userguide/reauthenticate-zh.jpg') }}"
               alt="重新验证密码" class="img-thumbnail" />
        </p>
        <p>
          不过要注意的是，当您使用记住密码功能时候，您可能需要在一些敏感操作之前重新验证您的身份。
        </p>
      </subsection>

      <subsection>
        <h3 id="signout">登出</h3>
        <p>
          <img src="{{ url_for('static', filename='img/userguide/signout-button-zh.jpg') }}"
               alt="登出按钮" class="img-thumbnail" />
        </p>
        <p>
          登陆之后，右上角的登陆按钮将会变成以您的头像和用户名为标签的下拉菜单。您可以随时点击下拉菜单中的<mark>登出</mark>，以退出系统。
        </p>
      </subsection>

      <subsection>
        <h3 id="edit-profile">编辑用户资料</h3>
        <p>
          <img src="{{ url_for('static', filename='img/userguide/edit-profile-button-zh.jpg') }}"
               alt="编辑用户资料按钮" class="img-thumbnail" />
        </p>
        <p>
          您可以使用右上角的<mark>编辑用户资料</mark>按钮进入用户资料编辑页面。在这个页面中，您可以修改您的电子邮箱、密码、语言、时区，以及您的姓氏和名称。
        </p>
        <p>
          如果您使用的是<mark>清华学堂</mark>的账户，那么您就不能修改您的密码。如果您使用的是系统内置账户（比如<mark>admin</mark>），那么您就不能修改您的邮箱。
        </p>
        <p>
          <img src="{{ url_for('static', filename='img/userguide/edit-locale-zh.jpg') }}"
               alt="修改语言" class="img-thumbnail" />
        </p>
        <p>
          如果您想要修改显示语言，您可以从<mark>语言</mark>下拉菜单中选择一个合适的选项。
        </p>
        <p>
          <img src="{{ url_for('static', filename='img/userguide/edit-timezone-zh.jpg') }}"
               alt="修改语言" class="img-thumbnail" />
        </p>
        <p>
          如果您想要修改时区，您需要输入一个<mark>IANA 时区名称</mark>（参见 <a href="http://en.wikipedia.org/wiki/IANA_time_zone_database">Wikipedia</a>）。为了方便输入，这个文本框具有自动补全功能。请注意，您提交的名称必须与补全建议中的名称大小写相一致。
        </p>
      </subsection>

      <subsection>
        <h3 id="gravatar">修改用户头像</h3>
        <p>
          <img src="{{ url_for('static', filename='img/userguide/gravatar.jpg') }}"
               alt="Gravatar" class="img-thumbnail" />
        </p>
        <p>
          超电磁炮使用了 Gravatar 的公共头像服务。如果您想要修改右上角显示的头像，请移步 <a href="http://www.gravatar.com">gravatar.com</a>，并将您的头像与您的电子邮件地址绑定。
        </p>
      </subsection>

      <subsection>
        <h3 id="small-screen">小屏幕设备优化</h3>
        <p>
          <img src="{{ url_for('static', filename='img/userguide/collapse-navi-zh.jpg') }}"
               alt="导航栏自动收起" class="img-thumbnail" />
        </p>
        <p>
          在小屏幕设备上，导航栏会自动收起至右上角的按钮。您可以点击这个按钮以显示或者隐藏导航栏。
        </p>
      </subsection>
    </section>

    <section>
      <h2 id="homework">完成作业</h2>

      <subsection>
        <h3 id="hwindex">作业概况</h3>
        <p>
          <img src="{{ url_for('static', filename='img/userguide/index-zh.jpg') }}"
               alt="作业概况" class="img-thumbnail" />
        </p>
        <p>
          在登录状态下，首页上会显示用户的作业概况。以绿色为底色的作业已经提交过解答，得分显示在右侧；以白色为底色的作业没有任何提交，并且右侧显示<mark>未通过</mark>。
        </p>
        <p>
          每一个作业的下一个截止日期，以及该截止日期前提交作业所得分数要乘以的比例因子则在<mark>截止时间/得分比例</mark>这一栏显示。<mark>截止时间</mark>所显示的并不是绝对日期，而是到截止时间剩下的时间长度。随着截止时间的临近，该时间长度会逐步显示得更加精确，直到以秒数为单位显示。
        </p>
      </subsection>

      <subsection>
        <h3 id="hwview">查看作业</h3>
        <p>
          <img src="{{ url_for('static', filename='img/userguide/hw-page-1-zh.jpg') }}"
               alt="查看作业-1" class="img-thumbnail" />
        </p>
        <p>
          点击首页上的作业连接，或者在<mark>作业</mark>导航栏中点击相应的菜单项，可以查看作业的详情。作业详细信息页面的第一部分是改作业的描述。在完成作业之前，您应当仔细研读作业描述，了解该作业的内容、考察点以及提交方式。
        </p>
        <p>
          <img src="{{ url_for('static', filename='img/userguide/hw-page-2-zh.jpg') }}"
               alt="查看作业-2" class="img-thumbnail" />
        </p>
        <p>
          向下滚动页面，可以看到附件的下载链接、作业所有<mark>截止日期</mark>与对应的<mark>得分比例</mark>，还有提交作业的表单。有些作业可能没有附件供下载，完成作业所需要的一切信息都在描述中给出。在截止日期的表格中，蓝色标注的日期是下一个即将到来的截止日期。
        </p>
      </subsection>

      <subsection>
        <h3 id="hwsubmit">提交作业</h3>
        <p>
          <img src="{{ url_for('static', filename='img/userguide/submit-archive-zh.jpg') }}"
               alt="提交作业（压缩包）" class="img-thumbnail" />
        </p>
        <p>
          <img src="{{ url_for('static', filename='img/userguide/submit-address-zh.jpg') }}"
               alt="提交作业（网址）" class="img-thumbnail" />
        </p>
        <p>
          <img src="{{ url_for('static', filename='img/userguide/submit-csvdata-zh.jpg') }}"
               alt="提交作业（CSV数据）" class="img-thumbnail" />
        </p>
        <p>
          在完成作业后，可以在作业详细信息的页面上提交解答。不同的作业可能有不同的提交方式，一切都以作业说明为准。当需要提交的内容输入完毕之后，您可以点击<mark>提交</mark>。
        </p>
      </subsection>

      <subsection>
        <h3 id="hwscore">作业分数</h3>
        <p>
          <img src="{{ url_for('static', filename='img/userguide/submits-1-zh.jpg') }}"
               alt="历史提交列表" class="img-thumbnail" />
        </p>
        <p>
          点击<mark>提交</mark>之后，页面会自动转到该作业所有历史提交记录的列表页。新的解答可能会显示为以蓝色标注的<mark>正在运行</mark>，也可能显示为以黄色标注的<mark>等待中</mark>。您可以稍等片刻，再次刷新页面。
        </p>
        <p>
          如果服务器没有出错，过一段时间之后，您解答的运行结果将会出现在这个页面上。绿色标注的记录（摘要一般为<mark>您的提交已合格</mark>）说明这个解答是可以运行并且有分数的，红色标注的记录则表明这个解答运行出错、或者不可运行，或者得了零分。
        </p>
        <p>
          在这一个页面上所显示的分数是解答的基本得分，乘以得分比例之后的分数。越晚提交，得分比例越低，因此您一定要按时提交作业。
        </p>
        <p>
          <img src="{{ url_for('static', filename='img/userguide/submit-button-zh.jpg') }}"
               alt="查看历史提交" class="img-thumbnail" />
        </p>
        <p>
          若您想要在不提交新的解答时，查看历史提交的得分，那么您可以在对应作业详细信息标题处找到<mark>提交记录</mark>的按钮，或者您可以在导航栏<mark>提交</mark>下找到对应的菜单项。
        </p>
      </subsection>

      <subsection>
        <h3 id="hwdetail">得分详情</h3>
        <p>
          <img src="{{ url_for('static', filename='img/userguide/detail-1-zh.jpg') }}"
                 alt="得分详情-1" class="img-thumbnail" />
        </p>
        <p>
          <img src="{{ url_for('static', filename='img/userguide/detail-2-zh.jpg') }}"
                 alt="得分详情-2" class="img-thumbnail" />
        </p>
        <p>
          在得分历史记录中，点击<mark>更多</mark>，可以查看指定解答的得分详情。得分详情有助于您找到解答中的问题。出错的解答还可能显示<mark>标准输出</mark>与<mark>标准错误输出</mark>。
        </p>
        <p>
          <img src="{{ url_for('static', filename='img/userguide/detail-3-zh.jpg') }}"
                 alt="得分详情-3" class="img-thumbnail" />
        </p>
        <p>
          <img src="{{ url_for('static', filename='img/userguide/detail-4-zh.jpg') }}"
                 alt="得分详情-4" class="img-thumbnail" />
        </p>
        <p>
          不过，管理员可能会禁止一些作业显示详细的错误信息。在上面的截图中，用户上传了一个程序，试图绕过评测机的限制，直接提交一个满分。尽管直接注入的可能性比较小，允许显示错误信息可能导致作业评分代码的泄露，因此管理员可能做出一些限制。
        </p>
        <p>
          如果您实在是无法解决问题，可以联系管理员，毕竟管理员可以看到任何详细记录。
        </p>
      </subsection>
    </section>
  </div>

  <!--
    TOC navigate bar here.
    The navigate content will be generated by railgun.js dynamically.
  -->
  <nav id="toc-navigate" class="sidebar col-md-3 hidden-sm hidden-xs">
    <ul class="nav sidenav" data-spy="affix" data-offset-top="120">
    </ul>
  </nav>
</div>
{%- endblock %}
<!-- Enable TOC navigation by following attributes in body tag -->
{% block bodyattrs %}
  data-spy="scroll" data-target="#toc-navigate"
{%- endblock %}
